{% extends 'myhome/base.html' %}
{% block con %}
<!--路径导航  面包屑导航-->
<div class="breadcrumbs-area mb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumbs-menu">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#" class="active">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="user-login-area mb-70">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="login-title text-center mb-30">
                    <h2>注册</h2>
                </div>
            </div>
            <div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
                <form action="{% url 'myhome_doregister' %}" method="post">
                    {% csrf_token %}
                    <div class="login-form">
                        <div class="single-login">
                            <label>
                                手机号
                                <span>*</span>
                            </label>
                            <input type="text" name="phone" required>
                        </div>
                        <div class="single-login">
                            <label>
                                密码<span>*</span>
                            </label>
                            <input type="password" name="password" required>
                        </div>
                        <div class="single-login">
                            <label>
                                确认密码<span>*</span>
                            </label>
                            <input type="password" name="repassword" required>
                        </div>
                        <div class="single-login" style="position:relative;">
                            <label>
                                验证码<span>*</span>
                            </label>
                            <input type="text" name="vcode">
                            <a id="sendcode" href="javascript:void(0)" style="position: absolute;top: 28px;right: 0px;border: none">发送手机验证码</a>
                        </div>

                        <div class="single-login single-login-2">
                            <a href="javascript:void(0)" id="register_button">注册</a>
                        </div>
                        <a href="#">忘记密码？</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
    <script>
        var isphone=false
        var ispass=false
        var isrepass=false
        var isclick=false
        var vcode=false
        var isvcode=false

        //给发送短信验证绑定单击事件
        $('#sendcode').click(function () {
            //判断是否可以触发单击事件
            if (isclick){return}

            //获取当前的手机号并验证是否正确
            if (!isphone){
                alert('请先填写正确的手机号码')
                return;
            }

            // 设计当前按钮不能再次点击60秒
            isclick=true
            $(this).css('background','gray')
            $(this).text('发送手机验证码(60)')
            var time=60
            var in1=setInterval(function ( ) {
                time--
                $('#sendcode').text('发送手机验证码('+time+')')
            },1000)
            setTimeout(function () {
                isclick=false
                $('#sendcode').css('background','green')
                $('#sendcode').text('发送手机验证码')
                clearInterval(in1)
            },60000)


            //如果正确，则发送ajax请求，发送短信验证码
            $.get('{% url "myhome_sendphone" %}',{'phone':isphone},function (data) {
                vcode=data['vcode']
            },'json')
        })

        //验证输入的短信验证码是否正确
        $('input[name=vcode]').blur(function () {
            if ($(this).val() == vcode){
                $(this).css('border','1px solid green')
                isvcode=true
            }else{
                $(this).css('border','1px solid red')
                isvcode=false
            }
        })

        //给注册的a标签绑定单击事件
        $('#register_button').click(function () {
            //找到对应的表单，触发事件
            $(this).parents('form').submit()
        })
        //给表单绑定表单提交事件
        $('form').submit(function () {
            //触发所有input的丧失焦点事件
            $('input').trigger('blur')
            //验证手机号,密码是否正确
            if (isphone && ispass && isrepass && isvcode){
                return true
            } else {
                return false
            }
        })
        //给手机号绑定丧失焦点事件
        $('input[name=phone]').blur(function () {
            //获取当前的手机号
            phone=$(this).val()

            //验证手机号格式是否正确
            reg=/^1\d{10}$/
            if (! reg.test(phone)){
                //手机号码格式不正确
                alert('手机号码不正确')
                $(this).css('border','1px solid red')
                isphone=false
                return;
            }
            //如果手机号格式正确，再去验证手机号是否已经注册
            $.get('{% url "myhome_checkphone" %}',{'phone':phone},function (data) {
                //判断返回结果
                if (data['code'] == 0){
                    isphone=phone
                    $('input[name=phone]').css('border','1px solid green')
                } else {
                    alert(data['msg'])
                    isphone=false
                    $('input[name=phone]').css('border','1px solid red')
                }
            },'json')
        })

        //验证密码的
        $('input[name=password]').blur(function () {
            var password=$(this).val()
            var reg=/^\w{6,18}$/
            if (reg.test(password)){
                $(this).css('border','1px solid green')
                ispass=true
            } else{
                $(this).css('border','1px solid red')
                ispass=false
            }
        })

        //验证确认密码
        $('input[name=repassword]').blur(function () {
            var password=$('input[name=password]').val()
            var repassword=$(this).val()
            var reg=/^\w{6,18}$/
            if (reg.test(repassword) && repassword == password) {
                $(this).css('border','1px solid green')
                isrepass=true
            }else{
                $(this).css('border','1px solid red')
                isrepass=false
            }
        })


    </script>
{% endblock %}